<template>
  <div>
    <!-- 
      1、研究一下是不是所有数组方法都会造成v-for的更新？
      答：不是
      到底哪些数据方法会造成v-for更新，哪些不会呢？
      答：会改变原始数组的方法就会造成v-for更新：reverse/push/splice/shift/unshift/sort ...
          不会改变原始数组的方法就不会造成v-for更新：slice / forEach/ filter/ map ...
      
      2、数组的内容改变，一定会造成v-for更新吗 ？
      答：不一定，有例外情况的: 就是当我们直接通过下标值修改数组元素的时候不会造成v-for更新
      因为，vue不能检测到通过下标值来修改数组元素的行为。

      现在就是想通过下标值来修改数组中的某个元素，如何实现 ？
      答：vue专门提供了一个方法来实现通过下标值修改元素，这个方法就是 
      this.$set(要修改的数组/对象, 下标值/属性名, 新的值)
     -->
    <ul>
      <li v-for="item in arr">{{ item }}</li>
    </ul>
    <button @click="reverseFn">点我翻转数组</button>
    <button @click="sliceFn">截取前2个数据</button>
    <button @click="indexFn">点我，通过下标值1修改数组元素</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: ["老大", "老二", "老三"],
    };
  },
  methods: {
    reverseFn() {
      // reverse方法能触发v-for更新
      // 是因为方法会改变原数组
      this.arr.reverse();
      console.log(this.arr);
    },
    sliceFn() {
      // slice方法不能触发v-for更新
      // 是因为此方法不会改变原始数组
      let newArr = this.arr.slice(0, 2);
      this.arr = newArr;
      console.log(this.arr);
    },
    indexFn() {
      // this.arr[1] = "新来的";
      this.$set(this.arr, 1, "新来的");
      console.log(this.arr);
    },
  },
};
</script>

<style>
</style>